{% if theme_preview == '1' or  storeConfig.comments_status == '1' %}

{% stylesheet %}
    .block_comment_image{
        padding: 50px 0;
    }
    .block_comment_image .block_title{
        text-align:center;
    }
    
    .block_comment_image .block_comment_list{
        position: relative;
        overflow: hidden;
        padding: 30px 20px;
    }
    .block_comment_image .block_comment_list li{
        display: flex;
        align-items: center;
        transition: all 0.3s;
        box-sizing: border-box;
    }
    .block_comment_image .block_comment_list li.swiper-slide-active{
        box-shadow: 0 5px 19px 4px rgb(0 0 0 / 7%);
        transform: translate(0,-15px);
    }
    .block_comment_image .block_comment_list .block_comment_img{
        margin-top: 30px;
        width: 100%;
        height: 150px;

    }
    .block_comment_image .block_comment_list .block_comment_img img{
        object-fit: cover;
        width: 100px;
        height: 100px;
    }
    .block_comment_image .block_comment_list .block_comment_content{
        width:100%;
        padding:30px;
        text-align:center;
        box-sizing: border-box;
    }
    .block_comment_image .view_product{
        display: inline-flex;
        margin-top: 20px;
    }
    .block_comment_image .view_product:hover{
        background: var(--secondary_button_color);
    }
    .block_comment_image .swiper-pagination-bullets{
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 30px 0 0;
        text-align: center;
    }
    .block_comment_image .swiper-pagination-bullets .swiper-pagination-bullet{
        width: 6px;
        height: 6px;
        opacity: 1;
        border: none;
        background: rgba(0,0,0,.1);
        box-sizing: border-box;
    }
    .block_comment_image .swiper-pagination-bullets .swiper-pagination-bullet-active{
        background: #000;
        width: 9px;
        height:9px;
    }
    .block_comment_image .block_comment_list_content{
        margin-top: 15px;
    }
    .block_comment_image .block_comment_list_time{
        margin-top: 20px;
    }
    .block_comment_image .block_comment_list_author{
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 10px;
    }
    .block_comment_image .block_comment_list_author img{
        width: 20px;
        margin-right: 10px;
    }
    @media (max-width: 768px) {
        .block_comment_image .block_comment_list li.swiper-slide-active{
            transform:none;
        }
    }
    @media (max-width: 767px) {
        .block_comment_image .block_comment_list{
            padding: 15px;
        }
        .block_comment_image{
            padding: 0;
        }
        .block_comment_image .block_comment_list li{
            padding: 0;
            flex-direction: column;
        }
        .block_comment_image .block_comment_list .block_comment_content{
            width: 100%;
            padding: 30px 15px;
        }
        .block_comment_image .block_comment_list_content{
            margin-top: 5px;
        }
        .block_comment_image .block_comment_list_time{
            margin-top: 10px;
        }
    }
{% endstylesheet %}

{%- capture product_id -%}
  {%- if section.settings.range_config.comment_range == 'select_product' -%}
    {{  section.settings.range_config.good_id.id }}
  {%- elsif section.settings.range_config.comment_range == 'current_product' -%}
    {{ product.id }}
  {%- endif -%}
{%- endcapture -%}
{%- capture collection_id -%}
  {%- if section.settings.range_config.comment_range == 'current_collection' -%}
    {{  collection_detail.id }}
  {%- endif -%}
{%- endcapture -%}
{% get_comments sort_order=id star={section.settings.level} sort_type={ section.settings.time } limit={section.settings.num} is_image=1 comment_range={section.settings.range_config.comment_range} product_id={product_id} collection_id={collection_id} %}

{% if comments %}
<div class="block_comment_image" id="block_comment_image_{{block_id}}">
    <div class="{% unless section.settings.is_wdith_fill %}container_wrapper{% endunless %}">
        {% if section.settings.title != '' or section.settings.detail != '' %}
        <div class="block_title">
            {% if section.settings.title != '' %}<h2>{{ section.settings.title }}</h2>{% endif %}
            {% if section.settings.detail != '' %}<div class="block_detail">{{ section.settings.detail|html_content_filter }}</div>{% endif %}
        </div>
        {% endif %}
        <div class="block_comment_list" id="block_comment_list_{{block_id}}">
            <ul class="swiper-wrapper">
                {% if comments %}
                {% for comment in comments %}
                {% get_product product_id={comment.product_id} %}
                <li class="swiper-slide">
                    
                    <div class="block_comment_content">

                        <div class="block_comment_list_star">
                            {% for index in (1..5) %}
                            {% if index <= comment.star %}
                            {% include icon_block_star ,{width:'16',height:'16',color: '#F8AD6B'} %}
                            {% else %}
                            {% include icon_block_star ,{width:'16',height:'16',color: '#bbbbbb'} %}
                            {% endif %}                        
                            {% endfor %}
                        </div>
                        <div class="block_comment_list_content">{{ comment.content }}</div>
                        <div class="block_comment_img"><img src="{{ comment.images.src.first|public_front_asset_url }}"></div>
                        {% if comment.created_at != "" %}
                        <div class="block_comment_list_time"><span class="format-date" data-date="{{ comment.created_at }}" data-format="YYYY-mm-dd">{{comment.created_at | date: "%Y-%m-%d"}}</span></div>
                        {% endif %}
                        <div class="block_comment_list_author"><img src="{{ comment.national_flag |public_front_asset_url}}" /> {{ comment.customer_name }}</div>
                        {% if section.settings.range_config.comment_range != "current_product" %}
                        <a class="view_product main_btn " href="/products/{{ product.handle }}?data_from={{data_from}}">View Product</a>
                        {% endif %}
                    </div>
                </li>
                {% endfor %}
                
                {% else %}
                <li class="swiper-slide">
                    
                    <div class="block_comment_content">

                        <div class="block_comment_list_star">
                            {% include icon_block_star ,{width:'16',height:'16',color: '#F8AD6B'} %}
                            {% include icon_block_star ,{width:'16',height:'16',color: '#F8AD6B'} %}
                            {% include icon_block_star ,{width:'16',height:'16',color: '#F8AD6B'} %}
                            {% include icon_block_star ,{width:'16',height:'16',color: '#F8AD6B'} %}
                            {% include icon_block_star ,{width:'16',height:'16',color: '#F8AD6B'} %}
                        </div>
                        <div class="block_comment_list_content">Add customer reviews and testimonials to showcase your store’s happy customers.</div>
                        <div class="block_comment_img"><img src="{{ 'empty.png' | public_asset_abs_dir_url }}"></div>
                        {% if comment.created_at != "" %}
                        <div class="block_comment_list_time"><span class="format-date" data-date="{{ comment.created_at }}" data-format="YYYY-mm-dd">2021-12-28</span></div>
                        {% endif %}
                        <div class="block_comment_list_author">Author's name</div>
                        <a class="view_product main_btn " href="javascript:void(0);">View Product</a>
                    </div>
                </li>
                <li class="swiper-slide">
                    
                    <div class="block_comment_content">

                        <div class="block_comment_list_star">
                            {% include icon_block_star ,{width:'16',height:'16',color: '#F8AD6B'} %}
                            {% include icon_block_star ,{width:'16',height:'16',color: '#F8AD6B'} %}
                            {% include icon_block_star ,{width:'16',height:'16',color: '#F8AD6B'} %}
                            {% include icon_block_star ,{width:'16',height:'16',color: '#F8AD6B'} %}
                            {% include icon_block_star ,{width:'16',height:'16',color: '#F8AD6B'} %}
                        </div>
                        <div class="block_comment_list_content">Add customer reviews and testimonials to showcase your store’s happy customers.</div>
                        <div class="block_comment_img"><img src="{{ 'empty.png' | public_asset_abs_dir_url }}"></div>
                        {% if comment.created_at != "" %}
                        <div class="block_comment_list_time"><span class="format-date" data-date="{{ comment.created_at }}" data-format="YYYY-mm-dd">2021-12-28</span></div>
                        {% endif %}
                        <div class="block_comment_list_author">Author's name</div>
                        <a class="view_product main_btn " href="javascript:void(0);">View Product</a>
                    </div>
                </li>
                <li class="swiper-slide">
                    
                    <div class="block_comment_content">

                        <div class="block_comment_list_star">
                            {% include icon_block_star ,{width:'16',height:'16',color: '#F8AD6B'} %}
                            {% include icon_block_star ,{width:'16',height:'16',color: '#F8AD6B'} %}
                            {% include icon_block_star ,{width:'16',height:'16',color: '#F8AD6B'} %}
                            {% include icon_block_star ,{width:'16',height:'16',color: '#F8AD6B'} %}
                            {% include icon_block_star ,{width:'16',height:'16',color: '#F8AD6B'} %}
                        </div>
                        <div class="block_comment_list_content">Add customer reviews and testimonials to showcase your store’s happy customers.</div>
                        <div class="block_comment_img"><img src="{{ 'empty.png' | public_asset_abs_dir_url }}"></div>
                        {% if comment.created_at != "" %}
                        <div class="block_comment_list_time"><span class="format-date" data-date="{{ comment.created_at }}" data-format="YYYY-mm-dd">2021-12-28</span></div>
                        {% endif %}
                        <div class="block_comment_list_author">Author's name</div>
                        <a class="view_product main_btn " href="javascript:void(0);">View Product</a>
                    </div>
                </li>
                <li class="swiper-slide">
                    
                    <div class="block_comment_content">

                        <div class="block_comment_list_star">
                            {% include icon_block_star ,{width:'16',height:'16',color: '#F8AD6B'} %}
                            {% include icon_block_star ,{width:'16',height:'16',color: '#F8AD6B'} %}
                            {% include icon_block_star ,{width:'16',height:'16',color: '#F8AD6B'} %}
                            {% include icon_block_star ,{width:'16',height:'16',color: '#F8AD6B'} %}
                            {% include icon_block_star ,{width:'16',height:'16',color: '#F8AD6B'} %}
                        </div>
                        <div class="block_comment_list_content">Add customer reviews and testimonials to showcase your store’s happy customers.</div>
                        <div class="block_comment_img"><img src="{{ 'empty.png' | public_asset_abs_dir_url }}"></div>
                        {% if comment.created_at != "" %}
                        <div class="block_comment_list_time"><span class="format-date" data-date="{{ comment.created_at }}" data-format="YYYY-mm-dd">2021-12-28</span></div>
                        {% endif %}
                        <div class="block_comment_list_author">Author's name</div>
                        <a class="view_product main_btn " href="javascript:void(0);">View Product</a>
                    </div>
                </li>
                {% endif %}
            </ul>
            <div class="block_comment_pagination_{{ block_id }}"></div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function(){
     {%- if comments.size > 1  -%}
       let loop = true;
       {%- else -%}
       let loop = false;
     {%- endif -%}
        new Swiper('#block_comment_list_{{ block_id }}', {
            slidesPerView: 3,
            spaceBetween: 30,
            centeredSlides: true,
            loop: loop,
            pagination: {
                el: '.block_comment_pagination_{{ block_id }}',
                clickable: true,
            },
            breakpoints: {
                767: {
                    slidesPerView: 1,
                    spaceBetween: 0,
                },
                768: {
                    slidesPerView: 1,
                    spaceBetween: 30,
                },
            },


        })
    })
   
</script> 
{% endif %}
{% endif %}

{% schema %}
{
	"name": {
		"zh_CN": "晒图评论",
		"en_US": "Image comments"
	},
	"tag": "default",
	"class": "block_comment_image",
	"is_global": false,
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_input",
			"id": "title",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"placeholder": {
				"zh-CN": "请输入标题"
			}
		},
		{
			"type": "card_text_editor",
			"id": "detail",
			"label": {
				"zh_CN": "简短描述",
				"en_US": "Short description"
			},
			"placeholder": {
				"zh-CN": "请输入描述"
			}
		},
        {
            "type": "card_select_show",
            "label": {
              "zh_CN": "评论范围",
              "en_US": "Scope of comment"
            },
            "placeholder": {
              "zh_CN": "评论范围",
              "en_US": "Scope of comment"
            },
            "default": {
              "comment_range": "single",
              "good_id": {
                "id": "",
                "title": ""
              }
            },
            "id": "range_config",
            "default_setting": {
              "type": "card_select",
              "label": {
                "zh_CN": "评论范围",
                "en_US": "Scope of comment"
              },
              "info": {
               "zh_CN": "1. 无评论时积木自动隐藏；2.「当前商品/专辑」仅详情页生效，其他全部页面生效；3. 选择专辑时，评论取自专辑内评论数前 50 的商品（商品缓存1小时更新）；4. 选择全部时，新评论因网页缓存需1小时后生效",
          "en_US": "1. Module hides automatically with no comments.  2. \"Current Product/Album\" only works on detail pages; others work across all pages.   3.  Selecting album: comments from its top 50 commented products (1-hour cache). 4. Selecting all: new comments take effect after 1 hour (due to web cache)"
        },
              "id": "comment_range",
              "option": [
                {
                  "label": {
                    "zh_CN": "所有商品",
                    "en_US": "All goods"
                  },
                  "value": "all"
                },
                {
                  "label": {
                    "zh_CN": "当前商品",
                    "en_US": "Current product"
                  },
                  "value": "current_product"
                },
                {
                  "label": {
                    "zh_CN": "指定商品",
                    "en_US": "Specified product"
                  },
                  "value": "select_product"
                },
                {
                  "label": {
                    "zh_CN": "当前专辑",
                    "en_US": "Current collection"
                  },
                  "value": "current_collection"
                }
              ],
              "default": "all"
            },
            "slot_settings": [
              {
                "value": "select_product",
                "settings": [
                  {
                    "type": "card_product",
                    "label": {
                      "zh_CN": "选择商品",
                      "en_US": "Select product"
                    },
                    "default": {
                      "id": "",
                      "title": ""
                    },
                    "id": "good_id"
                  }
                ]
              }
            ]
        },
		{
			"type": "card_switch",
			"label": {
				"zh_CN": "宽度铺满",
				"en_US": "Spread the width"
			},
			"id": "is_wdith_fill",
			"default": "0"
		},
		{
			"type": "card_slider",
			"id": "num",
			"max": "10",
			"min": "2",
			"label": {
				"zh_CN": "评论总数",
				"en_US": "Total number of comments"
			},
			"default": "8"
		},
		{
			"type": "card_select",
			"id": "time",
			"label": {
				"zh_CN": "评论时间",
				"en_US": "Comment time"
			},
			"option": [
				{
					"label": {
						"zh_CN": "最新评论",
						"en_US": "Latest Comments"
					},
					"value": "desc"
				},
				{
					"label": {
						"zh_CN": "最早评论",
						"en_US": "First comment"
					},
					"value": "asc"
				}
			],
			"default": "asc"
		},
		{
			"type": "card_select",
			"id": "level",
			"label": {
				"zh_CN": "评论星级",
				"en_US": "Review stars"
			},
			"option": [
				{
					"label": {
						"zh_CN": "五星",
						"en_US": "Five stars"
					},
					"value": "5"
				},
				{
					"label": {
						"zh_CN": "四星及以上",
						"en_US": "Four stars and above"
					},
					"value": "4"
				},
				{
					"label": {
						"zh_CN": "三星及以上",
						"en_US": "Three stars and above"
					},
					"value": "3"
				},
				{
					"label": {
						"zh_CN": "二星及以上",
						"en_US": "Two stars or above"
					},
					"value": "2"
				},
				{
					"label": {
						"zh_CN": "一星及以上",
						"en_US": "One star or above"
					},
					"value": "1"
				}
			],
			"default": "4"
		}
	],
	"blocks": [],
	"default": {
		"settings": {
            "refresh": true,
			"title": "Style Gallery",
			"detail": "",
            "range_config": {
                "comment_range": "all",
                "good_id": {
                  "id": "",
                  "title": ""
                }
            },
			"is_wdith_fill": true,
			"num": "5",
			"time": "asc",
			"level": "4"
		},
		"blocks": []
	}
}
{% endschema %}